<template>
	<view class="content">

		<view class="content_serch" style="display: flex;flex-direction: row;background-color: #f5f5f5;">
			<view style="flex: 1;">				
				<u-search style="wdith:80%;" placeholder="请输入" v-model="serchParmas" @search="searchList" shape="square" :show-action="false"
					:bg-color="'#fff'">
				</u-search>
			</view>
			<view style="width: 20px;margin-left:5px;margin-top:3px;">
				<image @click="add" style="width:20px;height:20px;" src='../../static/add.png'></image>				
			</view>
		</view>
		<view class="content_list" v-for="(item,index) in listData" :key='index' @click="go(item.id)"
			:class="{'content_list_last':index==listData.length - 1}">
			<view class="list">
				<view class="content_text" style="display: flex;flex-direction: row;">
					<view style="flex: 1;">
						<view class="content_title">
							<text class="content_name">{{item.village}}(#{{item.family_code}})</text>
						</view>
						<view class="content_arr">
							<text>户主:</text>
							<text>{{item.master_name}}</text>
						</view>
						<view class="content_arr">
							<text>家庭人口数:</text>
							<text>{{item.total}}</text>
						</view>
						<view class="content_arr">
							<text>入住情况:</text>
							<text>{{dictValue.occupancy[item.occupancy]}}</text>
						</view>
						<view class="content_arr">
							<text>住址:</text>
							<text>{{item.residential_name}}{{item.build_num}}栋{{item.unit_num}}单元</text>
						</view>						
					</view>
					<view style="padding-left:10px;">
						<view style="display: flex;justify-content:center;align-items: center;height:100%;">							
							<view :class="{'btn-undone':item.state!=1,'btn-done':item.state==1}">{{item.state|state}}</view>							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="nomore" style="width: 100%;text-align: center;color:#666;margin-top:-10px;margin-bottom:50px;font-size:12px;">
			<label>没有更多了</label>
		</view>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				dictValue: common.dictValue,
				serchParmas: '',
				customStyle: {
					backgroundColor: '#68B92E'
				},
				listData: [],
				pageNum: 1,
				pageNumber:[],
				nomore: false,
			}
		},
		onShow(options) {		
			this.nomore = false;
			this.pageNum = 1;
			this.listData = []
			this.getList()
		},
		onReachBottom() {
			if(!this.nomore){
				this.pageNum = this.pageNum + 1
				this.getList()				
			}			
			// if (this.pageNumber  && this.pageNumber.length == 10) {
			// 	this.pageNum = this.pageNum + 1
			// 	this.getList()
			// } else {
			// 	this.$refs.uTips.show({
			// 		title: '暂无更多',
			// 		type: 'info',
			// 		duration: '2300'
			// 	})
			// }
		},
		filters:{
			state: function(code){
				return code==1?"采集完成":"采集中";
			}
		},
		methods: {
			getList() {
				var that = this;
				uni.showLoading({"title":"数据加载中..."});
				uni.request({
					url: this.$common.baseUrl + 'api/data/getFamilyList',
					data: {
						pageNum: this.pageNum,
						keyword: this.serchParmas
					},
					method: 'GET',
					success: res => {
						uni.hideLoading();
						if (res.data.info == 200) {
							this.pageNumber = res.data.data.data
							this.listData = this.listData.concat(res.data.data.data)
							console.log(res.data.data.pageSize);
							console.log(res.data.data.pageSize);
							console.log(this.listData.length);
							if(this.pageNumber.length<res.data.data.pageSize){
								that.nomore = true;
							}else{
								that.nomore = false;
							}
						}
					},
					fail: err => {
						uni.hideLoading();
					}
				})
			},
			go(id) {
				uni.navigateTo({
					url: 'details?id='+id
				})
			},
			add() {
				uni.navigateTo({
					url: 'households'
				})
			},
			searchList() {
				this.getList()
			},
			showContent() {

			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5
	}
</style>
<style scoped>
	.content {
		width: 100%;
		margin-top: 0 !important;
		background-color: #F5F5F5;
		padding: 0 30rpx 20rpx 30rpx !important;
	}

	.content_serch {
		position: sticky;
		top: 0;
		padding-top: 20rpx;
	}

	.content_list {
		width: 100%;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.content_list_last {
		margin-bottom: 80rpx;
	}

	/* .content-book:not(:nth-last-of-type(2)) */
	/* .content_list:last-of-type(){
		margin-bottom: 60rpx !important;
	} */
	.list {
		margin: 30rpx;
	}

	.content_title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.content_name {
		font-size: 27rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.content_arr {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-bottom: 5rpx;
	}

	.right image {
		width: 30rpx;
		height: 30rpx;
	}

	.content_add {
		position: fixed;
		bottom: 5rpx;
		width: 95%;
		left: 50%;
		transform: translateX(-50%);
	}

	.button-hover {
		background-color: #68B92E;
	}
	.btn-done{
		flex:1;text-align:right;background-color: #1E9FFF;color:white;padding:3px 4px;border-radius:3px;
	}
	.btn-undone{
		flex:1;text-align:right;background-color: #FFB800;color:white;padding:3px 4px;border-radius:3px;
	}
</style>
